<template>
  <div class="field-calendar">
    <van-field
      clickable
      readonly
      :is-link="!readonly && !disabled"
      :label="label"
      :value="showDate || ''"
      :placeholder="placeholder"
      :required="required"
      :disabled="disabled"
      :rules="rules"
      @click="showCalendar = !disabled"
    />
    <van-calendar
      ref="calendar"
      v-model="showCalendar"
      :title="label"
      :color="color"
      get-container="body"
      :confirm-text="confirmText"
      :min-date="new Date(0)"
      @select="onSelectDate"
      @open="onOpenCalender"
    >
      <template #footer>
        <van-row type="flex">
          <van-button class="van-calendar__confirm" plain hairline type="default"
            size="small" style="width: 70px; margin-right: 10px;"
            @click="onChange()"
          >
            清空
          </van-button>
          <van-button class="van-calendar__confirm"
            type="primary"
            size="small" style="flex-grow: 1;"
            @click="onChange(currentDate)"
          >
            {{ confirmText }}
          </van-button>
        </van-row>
      </template>
    </van-calendar>
  </div>
</template>

<script>
const dayjs = require('dayjs');
const customParseFormat = require('dayjs/plugin/customParseFormat');
dayjs.extend(customParseFormat);

export default {
  name: 'fieldCalender',
  props: {
    label: {
      type: String
    },
    value: {
      type: [String, Date, Number]
    },
    placeholder: {
      type: String
    },
    color: {
      type: String
    },
    confirmText: {
      type: String,
      default: '确定'
    },
    disabled: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    },
    required: {
      type: Boolean,
      default: false
    },
    rules: {
      type: Array
    },
    format: {
      type: String,
      default: 'YYYY-MM-DD'
    }
  },
  data () {
    return {
      showCalendar: false,
      dirty: false,
      currentDate: undefined
    }
  },
  methods: {
    onChange (value) {
      let temp = value ? value.format(this.format) : undefined;
      this.$emit('input', temp);
      this.$emit('change', temp);
      this.showCalendar = false;
    },
    onOpenCalender () {
      let date = this.day ? new Date(this.day.valueOf()) : new Date();
      this.onSelectDate(date);
      if (this.$refs.calendar) this.$refs.calendar.reset(date);
      this.currentDate = this.day;
    },
    setDirty (dirty) {
      this.dirty = dirty;
    },
    getDirty () {
      return this.dirty;
    },
    onSelectDate (date) {
      this.currentDate = dayjs(date);
    }
  },
  computed: {
    day () {
      if (this.value == null) return null;
      if (typeof this.value === 'string') {
        return dayjs(this.value, this.format);
      } else {
        return dayjs(this.value);
      }
    },
    showDate () {
      return this.day ? this.day.format(this.format) : undefined;
    }
  }
}
</script>

<style>
</style>
